<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">
  <title>访客分析</title>

  <script type="text/javascript" src="../resources/js/contants.js"></script>
  <link href="../resources/css/bootstrap.min.css" rel="stylesheet">
  <link href="../resources/css/font-awesome.min.css" rel="stylesheet">
  <link href="../resources/css/style.min.css" rel="stylesheet">
  <link href="../resources/css/dateRange.css" rel="stylesheet">
  <link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
  <link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss"
        style="">
  <link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
  <div class="row">
    <div class="col-sm-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-success pull-right">昨日</span>
          <h5>新增访客</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins"><span id="user_behavior_new_users">-</span></h1>
          <div class="stat-percent font-bold fa-lg">
            <span id="user_behavior_new_user_rate" class="fa"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-success pull-right">昨日</span>
          <h5>活跃访客</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins"><span id="user_behavior_active_users">-</span></h1>
          <div class="stat-percent font-bold">
            <span id="user_behavior_active_user_rate" class="fa"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-success pull-right">昨日</span>
          <h5>总访客</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins"><span id="user_behavior_total_users">-</span></h1>
          <div class="stat-percent font-bold text-navy">
            <span id="user_behavior_total_user_rate" class="fa"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="demo_title" class="col-sm-12 no-margins">
      <div class="row no-paddings no-margins no-border">
        <div class="col-sm-12 no-margins" style="padding:0px; border:0px;">
          <div class="ibox no-margins">
            <div class="ibox-content">
              <span class="no-margins">选择时间：</span>
              <button id="time_show_bt" type="button"
                      class="btn btn-default no-margins no-borders no-paddings"
                      style="padding-bottom: 0px">
                <span id="date1">默认</span>
                <span class="caret"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="demo" class="col-sm-12"></div>
    <div id="demo2" class="col-sm-12"></div>
    <div id="demo3" class="col-sm-12"></div>
  </div>
</div>

<script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../resources/js/dateRange.js"></script>
<!-- highcharts js -->
<script type="text/javascript" src="../resources/js/highcharts.js"></script>
<script type="text/javascript" src="../resources/js/exporting.js"></script>
<script type="text/javascript" src="../resources/js/json2.js"></script>
<script type="text/javascript" src="../resources/js/common.js"></script>

<script type="text/javascript">
  var startDate = getStartDate();
  var endDate = getEndDate();

  function showSpeedRate(showId, value) {
    if (value) {
      if (value > 0) {
        $(showId).html(value.toPercent() + "%");
        $(showId).addClass("text-danger");
        $(showId).addClass("fa-level-up");
      } else {
        value = value * -1;
        $(showId).html(value.toPercent() + "%");
        $(showId).addClass("text-success")
        $(showId).addClass("fa-level-down");
      }
    } else {
      $(showId).html("-");
      $(showId).addClass("text-info");
    }
  }

  function load1(sd, ed) {
    console.log("    function load1(sd, ed)....");
    var url = COMMON_PREFIX_URL
        + "/stats/groupBy/user_behavior?metric=new_users,active_users,total_users&platform=website&group_by=day";
    url += "&start_date=" + sd + "&end_date=" + ed;
    $.get(url, {}, function (data) {
      cleanContent("demo");
      cleanContent("demo2");
      cleanContent("demo3");

      if (data.code == '200') {
        if (data.data.length == 0) {
          showNoConnent("demo");
          return;
        }
        var chart = new Highcharts.Chart({
          chart: {
            renderTo: 'demo', // 在那个标签上显示，指定id即可
            type: "column" // 类型
          },
          xAxis: {
            title: {
              text: "日期"
            }
          },
          yAxis: [{
            title: {
              text: "用户数量"
            }
          }],
          title: {
            text: "新访客、活跃访客和总访客比较图"
          },
          series: []
        });
        var chart2 = new Highcharts.Chart({
          chart: {
            renderTo: 'demo2',
            type: 'area'
          },
          title: {
            text: '活跃用户组成'
          },
          xAxis: {
            tickmarkPlacement: 'on',
            title: {
              enabled: false
            }
          },
          yAxis: {
            title: {
              text: '百分比'
            }
          },
          tooltip: {
            pointFormat: '<span stype="color:{series.color}">{series.name}</span>:<b>{point.percentage:0.1f}%</b> ({point.y:,.0f})<br/>',
            shared: true
          },
        });
        var chart3 = new Highcharts.Chart({
          chart: {
            renderTo: 'demo3',
            type: 'area'
          },
          title: {
            text: '总用户组成'
          },
          xAxis: {
            tickmarkPlacement: 'on',
            title: {
              enabled: false
            }
          },
          yAxis: {
            title: {
              text: '百分比'
            }
          },
          tooltip: {
            pointFormat: '<span stype="color:{series.color}">{series.name}</span>:<b>{point.percentage:0.1f}%</b> ({point.y:,.0f})<br/>',
            shared: true
          },
        });

        var categories = [];
        var activeUsersSeries = {
          name: "活跃用户",
          data: []
        };
        var newUsersSeries = {
          name: "新用户",
          data: []
        };
        var totalUsersSeries = {
          name: "总用户",
          data: []
        };
        var noActiveUsersSeries = {
          name: "不活跃用户",
          data: []
        };
        var oldUsersSeries = {
          name: "老用户",
          data: []
        };
        var activeUsersSeries2 = {
          name: "活跃用户",
          data: []
        };
        var newUsersSeries2 = {
          name: "新用户",
          data: []
        };

        $.each(data.data, function (i, item) {
          categories.push(item["day"]);
          var active = item["$active_users"];
          var nu = item["$new_users"];
          var total = item["$total_users"];
          var old = active - nu;
          var na = 0;
          if (active <= total) {
            na = total - active;
          }

          activeUsersSeries["data"].push(active);
          newUsersSeries["data"].push(nu);
          activeUsersSeries2["data"].push(active);
          newUsersSeries2["data"].push(nu);
          totalUsersSeries["data"].push(total);
          oldUsersSeries["data"].push(old);
          noActiveUsersSeries["data"].push(na);
        });

        chart.addSeries(newUsersSeries);
        chart.addSeries(activeUsersSeries);
        chart.addSeries(totalUsersSeries);

        chart2.addSeries(newUsersSeries2);
        chart2.addSeries(oldUsersSeries);

        chart3.addSeries(activeUsersSeries2);
        chart3.addSeries(noActiveUsersSeries);

        chart.xAxis[0].setCategories(categories);
        chart2.xAxis[0].setCategories(categories);
        chart3.xAxis[0].setCategories(categories);
        return true;
      } else {
        showNoConnent("demo", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
      }
      return false;
    }, "json");
  }

  $(document).ready(function () {
    console.log("  $(document).ready(function () {......");
    var sd = date2YmdStr(getYesterDay());
    var ed = sd;
    console.log(COMMON_PREFIX_URL);
    var url = COMMON_PREFIX_URL
        + "/stats/groupBy/user_behavior?metric=new_users,active_users,total_users&platform=website&group_by=day";
    url += "&start_date=" + sd + "&end_date=" + ed;

    var url2 = COMMON_PREFIX_URL
        + "/stats/summary/user_behavior?metric=total_users,active_users,new_users,total_user_speed_rate,new_user_speed_rate,active_user_speed_rate&start_date="
        + sd + "&end_date=" + ed + "&platform=website";

    var url3 = COMMON_PREFIX_URL + "/stats/summary/user_behavior?metric=total_users,active_users,new_users,total_user_speed_rate,new_user_speed_rate,active_user_speed_rate&start_date=2015-11-01&end_date=2015-12-30&platform=website";
    $.get(url2, {}, function (data) {
      if (data.code == '200' && data.data.length > 0) {
        var usersData = data.data[0];
        console.log(data.data);
        console.log(usersData);
        console.log(usersData["$total_users"])
        console.log(usersData["$new_user_speed_rate"])
        console.log(usersData["$active_users"])
        console.log(usersData["$active_user_speed_rate"])
        console.log(usersData["$total_user_speed_rate"])
        console.log(usersData["$new_users"])
        var nu = usersData["$new_users"];

        console.log("typeof(nu): " + typeof(nu))
        if (typeof(nu) != "undefined") {
          $("#user_behavior_new_users").html(nu.formatThousands());
          alert("nu.formatThousands(): " + nu.formatThousands());
          alert("nu: " + nu);
          var b = usersData["$new_user_speed_rate"];
          showSpeedRate("#user_behavior_new_user_rate", b);
        }
        var au = usersData["$active_users"];
        if (typeof(au) != "undefined") {
          $("#user_behavior_active_users").html(au.formatThousands());
          var a = usersData["$active_user_speed_rate"];
          showSpeedRate("#user_behavior_active_user_rate", a);
        }
        var tu = usersData["$total_users"];
        if (typeof(tu) != "undefined") {
          $("#user_behavior_total_users").html(tu.formatThousands());
          var c = usersData["$total_user_speed_rate"];
          showSpeedRate("#user_behavior_total_user_rate", c);
        }
      } else {
        //
      }
    }, "json");

    load1(startDate, endDate);

    // 显示时间控件
    new AE_Date('date1', 'time_show_bt', function (startDate, endDate) {
      load1(startDate, endDate);
    }, startDate, endDate);
  });

</script>
</body>
</html>